    body,
    ul,
    p {
        padding: 0;
        margin: 0;
    }
    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

    img {
        border: none;
        display: block;
    }

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .container{
        width: 100%;
    }
    /* 以上为全局CSS */
    .goods_banner {
        width: 100%;
    }

    .goods_banner>.slide {
        /* 一个div就是一个屏幕的宽度，但是里面有5个li，5个屏幕的宽度，也就是说，
        子元素要比父元素宽，所以要溢出隐藏 */
        overflow: hidden;
        /* 溢出隐藏 */
        border-radius: 2vw;
    }

    .goods_banner>.slide>ul {
        width: 500%;
        overflow: hidden;
        /* 溢出隐藏BFC */
        animation: lunbo 10s infinite;
        /*参数如下：关键帧名，播放时间，怎么播放 infinite（无限播放）  */
    }

    .goods_banner>.slide li {
        width: 20%;
        /* 5个屏幕宽度的20%=1个屏幕的宽度 */
        float: left;
        position: relative;
        /* 子元素p要绝对定位，父元素li要相对定位 */
    }

    .goods_banner>.slide img {
        width: 100%;
        /* 一个屏幕的宽度 */
    }

    /* 关键帧 */
    @keyframes lunbo {
        10% {
            margin-left: 0;
        }

        /* from 10秒的10% ,0-1s */
        20% {
            margin-left: -100%;
        }

        /* 1-2s */
        30% {
            margin-left: -100%;
        }

        40% {
            margin-left: -200%;
        }

        /* 走2个 */
        50% {
            margin-left: -200%;
        }

        60% {
            margin-left: -300%;
        }

        /* 走3个 */
        70% {
            margin-left: -300%;
        }

        80% {
            margin-left: -400%;
        }

        /* 走4个 */
        90% {
            margin-left: -400%;
        }

        100% {
            margin-left: 0;
        }

        /* 回到原点 */
    }
    section{
        width: 100%;
        margin-bottom: 15vw;
    }

    section .p_info {
        width: 100%;

    }

    section .p_info>.price {
        color: #fa6c00;
        font-size: 8vw;
        background-color: #FFF;
        overflow: hidden;
        padding: 1.2vw;
    }

    section .p_info>.price sup {
        font-size: 4vw;
        font-weight: bold;
    }

    section .goods {
        padding:0 3vw 3vw;
        border-radius: 5vw 5vw 0 0;
        background-color: #FFF;
        box-shadow: 0 0 4vw #b0b0b0;

    }

    section .goods h3 {
        font-weight: 500;
        font-size: 6vw;
        margin: 1.5vw 0;
    }

    section .p_info .goods p {
        width: 100%;
        font-size: 3.5vw;
        margin: 2vw;
        text-overflow: ellipsis;
    }

    section .type {
        background-color: #FFF;
        width: 100%;
        overflow: hidden;
        display: flex;
        border-top: .1vw dotted #000;
        border-bottom: .1vw dotted #000;
    }

    section .type li {
        width: 20%;
        text-align: center;
        overflow: hidden;
        padding: 1vw;
    }

    section .type li svg {
        font-size: 4vw;
        margin: 1vw;
    }

    section .type li p {
        text-align: center;
        font-size: 3vw;
        margin: -1vw;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    section .type li span {
        text-align: center;
        font-size: 3vw;
        white-space: nowrap;
        text-overflow: ellipsis;

    }

    .goods_info{
        width: 100%;
    }
    .info_type {
        width: 100%;
    }
    .info_type li{
        width: 100%;
        display: flex;
        height: 10vw;
        padding: 2vw 0;
        overflow: hidden;
    }
    .info_type span{
        margin: 0 4vw;
        font-size: 4vw;
        font-weight: bold;
        line-height: 10vw;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        letter-spacing: 1vw;
    }
    .info_type  div:nth-of-type(1){
        border-bottom: 1px solid #cbcbcb;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 3.4vw;
        line-height: 10vw;
        flex-grow: 1;
        padding-left: 2vw;
    }
    .info_type div:nth-of-type(2){
        text-align: right;
        line-height: 10vw;
        border-bottom: 1px solid #cbcbcb;
        margin-right: 2vw;
    }

    
    footer {
        width: 100%;
        height: 15vw;
        border-top: .5vw solid #f2f2f2;
        background-color: #fff;
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
    }

    footer ul {
        flex-grow: .5;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 4vw;
        color: #999;
    }

    footer ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer ul li svg{
        font-size: 5vw;
        margin-bottom: 1vw;
        color: #000;
    }
    footer ul li p {
        font-size: 4vw;
        color: #000;
        margin-bottom: .2vw;
        letter-spacing: .5vw;
    }

    footer .cart {
        flex-grow:1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer .cart .cart_box {
        width: 90%;
        height: 10vw;
        line-height: 10vw;
        text-align: center;
        background-color: #ff7700;
        border-radius: 5vw;
        font-size: 4vw;
        color: #FFF;
    }
